<template>
  <div class="subject-content">

    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
      <el-form-item label="字典名称">
        <el-select v-model="queryParams.dictType" style="width: 110px">
          <el-option v-for="(item,index) in typeOptions" :key="index" :label="item.dictName" :value="item.dictType"/>
        </el-select>
      </el-form-item>

      <el-form-item label="字典标签" prop="dictLabel">
        <el-input v-model="queryParams.dictLabel" placeholder="请输入字典标签" clearable style="width: 140px" @keyup.enter.native="handleQuery"/>
      </el-form-item>

      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="数据状态" clearable style="width: 110px">
          <el-option v-for="(item, index) in dict.dictType.status" :key="index" :label="item.dictLabel" :value="item.dictValue"/>
        </el-select>
      </el-form-item>

      <el-form-item label="创建时间" prop="dateTimeRangeCreate">
        <el-date-picker
            style="width: 340px"
            v-model="queryParams.dateTimeRangeCreate"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"/>
      </el-form-item>

      <el-form-item label="更新时间" prop="dateTimeRangeUpdate">
        <el-date-picker
            style="width: 340px"
            v-model="queryParams.dateTimeRangeUpdate"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"/>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="searchQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>

    </el-form>

    <el-row :gutter="10" style="margin-bottom: 15px">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" @click="handleUpdate">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" @click="handleDelete" size="mini">删除</el-button>
      </el-col>
    </el-row>



    <el-table v-loading="loading" :data="dictDataList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="字典编码" align="center" prop="dictCode" />
      <el-table-column label="字典标签" align="center" prop="dictLabel">
        <template v-slot="scope">
          <el-tag v-if="scope.row.listClass == '' || scope.row.listClass == 'default'">{{scope.row.dictLabel}}</el-tag>
          <el-tag v-else :type="scope.row.listClass">{{scope.row.dictLabel}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="字典键值" align="center" prop="dictValue" />
      <el-table-column label="字典排序" align="center" prop="dictSort" />
      <el-table-column label="状态" align="center">
        <template v-slot="scope">
          <dictTag :options="dict.dictType.status" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
      <el-table-column label="创建时间" align="center" prop="createTime" width="180"/>
      <el-table-column label="更新时间" align="center" prop="updateTime" width="180"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="text" size="small" icon="el-icon-edit" @click="rowUpdate(scope.row)">修改</el-button>
          <el-button type="text" size="small" icon="el-icon-delete" @click="rowDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <page
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.current"
        :limit.sync="queryParams.size"
        @pagination="getList"
    />



    <!--  添加或修改 文章弹出框-->
    <el-dialog :title="title" :visible.sync="open" width="600px" :show-close="false" append-to-body>
      <el-form ref="dictDataForm" :model="dictDataForm" :rules="rules" size="small" label-width="100px">

        <el-form-item label="字典类型" prop="dictType">
          <el-input v-model="dictDataForm.dictType" placeholder="请输入字典类型" clearable size="small" :disabled="true" style="width: 300px"/>
        </el-form-item>

        <el-form-item label="字典标签" prop="dictLabel">
          <el-input v-model="dictDataForm.dictLabel" placeholder="请输入字典标签" clearable size="small" style="width: 300px"/>
        </el-form-item>

        <el-form-item label="字典键值" prop="dictValue">
          <el-input v-model="dictDataForm.dictValue" placeholder="请输入字典键值" clearable size="small" style="width: 300px"/>
        </el-form-item>

        <el-form-item label="样式属性" prop="cssClass">
          <el-input v-model="dictDataForm.cssClass" placeholder="请输入样式属性" clearable size="small" style="width: 300px"/>
        </el-form-item>

        <el-form-item label="回显样式" prop="listClass">
          <el-select v-model="dictDataForm.listClass" style="width: 300px">
            <el-option v-for="dict in dict.dictType.list_class" :key="dict.value" :label="dict.dictLabel" :value="dict.dictValue">
              <span style="float: left">{{ dict.dictLabel }}</span>
              <span style="float: right"><el-tag v-if="dict.dictValue != 'default' || dict.dictValue != ''" :type="dict.dictValue">{{ dict.dictLabel }}</el-tag> </span>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="排序" prop="dictSort">
          <el-input-number v-model="dictDataForm.dictSort" controls-position="right" :min="0"/>
        </el-form-item>

        <el-form-item label="状态" prop="status">
          <el-select v-model="dictDataForm.status" style="width: 110px">
            <el-option v-for="dict in dict.dictType.status" :key="dict.value" :label="dict.dictLabel" :value="dict.dictValue"/>
          </el-select>
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-input
              type="textarea"
              v-model="dictDataForm.remark"
              placeholder="请输入备注"
              clearable
              size="small"
              maxlength="200"
              :autosize="{ minRows: 8, maxRows: 8}"
              show-word-limit
              style="width: 400px"/>
        </el-form-item>

      </el-form>

      <div slot="footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {selectDictById,selectDictTypeAll} from "@/api/admin/dict/dict";
import dictTag from "@/views/components/dictTag";
import Page from "@/views/components/page";
import {
  addDictData, deleteDictDataById,
  deleteDictDataByIds,
  dictDataList,
  selectDictDataById,
  updateDictData
} from "@/api/admin/dict/dictData";

export default {
  name: "dictData",
  dicts:["status","list_class"],
  components: {Page,dictTag},
  data() {
    return {
      // 遮罩层
      loading: true,
      // 是否显示弹出层
      open: false,
      // 弹出层标题
      title: "",
      // 选中数组
      ids: [],
      // 总条数
      total: 0,
      //表格数据
      dictDataList: [],
      // 类型数据字典
      typeOptions: [],
      // 查询参数  current 当前页   size 页大小
      queryParams: {
        current: 1,
        size: 10,
        dictType: undefined,
        dictLabel: undefined,
        status: undefined,
        dateTimeRangeCreate: [],
        dateTimeRangeUpdate: [],
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      // 添加、修改提交参数
      dictDataForm:{},
      // 表单数据校验
      rules: {

      },

    }
  },
  methods:{
    /**
     * 更具id 查询字典类型
     */
    getDictTypeById(){
      selectDictById(this.$route.params.dictId).then(res=>{
        this.queryParams.dictType = res.data.dictType;
        this.getList();
      })
    },
    /**
     * 查询所有字典类型
     */
    getAllDictType(){
      selectDictTypeAll().then(res=>{
        this.typeOptions = res.data;
      })
    },
    /**
     * 更具字典类型 查询 字典数据列表
     */
    getList(){
      dictDataList(this.queryParams).then(res => {
        this.dictDataList = res.data.records;
        this.total = res.data.total;
        this.loading = false;
      })
    },
    /** 搜索按钮操作 */
    searchQuery() {
      this.queryParams.current = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.searchQuery();
    },
    /** 表单重置 */
    reset() {
      this.dictDataForm = {
        dictCode:undefined,
        dictSort:0,
        dictLabel:undefined,
        dictValue:undefined,
        dictType:this.queryParams.dictType,
        cssClass:undefined,
        listClass:"default",
        isDefault:undefined,
        status:"0",
        remark:undefined
      };
      this.resetForm("dictDataForm");
    },
    /** 头工具栏--添加*/
    handleAdd(){
      this.reset();
      this.open = true;
    },
    /** 头工具栏--修改*/
    handleUpdate(){
      if(this.ids.length === 0){
        this.$modal.msgWarning('请选择要修改的字典数据！')
      }else if(this.ids.length>1){
        this.$modal.msgWarning('请选择一条字典数据进行修改！')
      }else{
        this.reset();
        const dictCode = this.ids;
        selectDictDataById(dictCode).then(res =>{
          this.dictDataForm = res.data;
          this.title = "修改字典数据"
          this.open = true;
        })
      }
    },
    /** 头工具栏--删除*/
    handleDelete(){
      const data = this.ids;
      const size = data.length;
      this.$modal.confirm('是否确认删除？').then(function () {
        return deleteDictDataByIds(data);
      }).then(res =>{
        this.getList();
        this.$modal.msgSuccess(res.msg+","+size+"条数据");
      })
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs.dictDataForm.validate(valid =>{
        if(valid){
          if(this.dictDataForm.dictCode != undefined){
            updateDictData(this.dictDataForm).then(res =>{
              this.$modal.msgSuccess(res.msg);
              this.open = false;
              this.getList()
            })
          }else{
            addDictData(this.dictDataForm).then(res =>{
              this.$modal.msgSuccess(res.msg);
              this.open = false;
              this.getList()
            })
          }
        }
      })
    },
    /**取消按钮 */
    cancel() {
      this.open = false;
      this.reset();
    },
    /**行工具--修改 */
    rowUpdate(row){
      this.reset();
      const dictCode = row.dictCode;
      selectDictDataById(dictCode).then(res =>{
        this.dictDataForm = res.data;
        this.title = "修改字典数据"
        this.open = true;
      })
    },
    /**行工具--删除 */
    rowDelete(row){
      const dictCode = row.dictCode;
      this.$modal.confirm('是否确认删除？').then(function () {
        return deleteDictDataById(dictCode);
      }).then(res =>{
        this.getList();
        this.$modal.msgSuccess(res.msg);
      })
    },




    /**多选框选中数据*/
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.dictCode)
    },
  },
  created() {
    this.getDictTypeById()
    this.getAllDictType()
  },
}
</script>

<style scoped>

/deep/ .el-dialog{
  position: fixed !important;
  right: 0 !important;
  top: 0 !important;
  z-index: 2500 !important;
  margin-top: 0 !important;
  height: 100%;
}

</style>
